<template>
    <div>
        <div class="flex flex-space-x flex-center-y" :class="[
            theme === 'dark' ? 'theme-dark' : '',
            noFixed ? 'no-fixed' : '',
            !noFixed ? 'fav-head' : ''
        ]">
            <span class="fav-head-left" :style="{opacity: noBack ? '0' : '1'}" v-on:click="goBack">
                <i class="iconfont c-icon icon-arrow-left"></i>
                <!-- <van-icon name="arrow-left" size="0.48rem" color="#fff" class="c-icon"/> -->
            </span>
            <span class="fav-head-title c-line-clamp1">{{title}}</span>
            <div class="rightText" v-on:click="done" v-if="rightText">{{rightText}}</div>
            <div v-else style="width: 1.5em"></div>
        </div>
        <div class="height" v-if="!noFixed"></div>
    </div>
</template>
<script>
export default {
    props: ['title', 'back_path', 'rightText', 'cb', 'theme', 'noBack', 'noFixed'],
    watch: {
        title(v){this.title = v},
        rightText(v){this.rightText = v},
        back_path(v){this.back_path = v},
        theme(v){this.theme = v}
    },
    methods: {
        goBack(){
            if(this.noBack){
                return
            }
            if(this.back_path){
                return this.$router.replace(this.back_path)
            }
            this.$router.back()
        },
        done(){
            this.cb && this.cb()
        }
    }
}
</script>
<style scoped>
.height{
    height: .9rem;
}
.fav-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3500;
    width: 100%;
    height: .9rem;
    text-align: center;
    background-color: #5E8EFE;
    color: #fff;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.no-fixed{
    position: relative;
    z-index: 3500;
    height: .9rem;
    background-color: #5E8EFE;
    color: #fff;
}
.theme-dark {
    background-color: rgb(40,40,40);
    color: #fff;
}
.fav-head-left {
    margin-left: .22rem;
}
.rightText{
    margin-right: .22rem;
    font-size: .32rem;
}
.c-icon {
    font-size: .37rem;
}
.c-line-clamp1 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size: .35rem;
}
</style>
